import './statistical.scss'

import { Card, Avatar, Button } from '@arco-design/web-react';
import { IconUser } from '@arco-design/web-react/icon';
import { useNavigate } from 'react-router-dom'

const { Meta } = Card;

const Statistical = () => {
    const navigate = useNavigate();

    const linkTo = () => {
        navigate('/home/report/dailyChargesTable')
    }

    return (
        <>
            <div className='statistical'>

                {/* 列表渲染 */}

                <Card style={{ width: 350 }}>
                    <div className='statistical_card'>
                        <div className='card_icon'>
                            <Avatar style={{ backgroundColor: '#3370ff' }}>
                                <IconUser />
                            </Avatar>
                        </div>

                        <div className='card_description'>
                            <h3>日收费报表</h3>
                            <p>记录指定时间段内场内车辆停车情况</p>
                        </div>
                    </div>
                    <Meta
                        description={
                            <>
                                <Button type='secondary' long onClick={linkTo}>查看报表</Button>
                            </>
                        }
                    />
                </Card>
            </div>
        </>
    );
};

export default Statistical;